<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>好玩的地心说模型</title>
    <style>
        :root {
            --pov: 66deg;
            --day: 14s;
            --sun-orbit-progress: 0.7;
            --bg-color: #111;
            --orbit-sphere-color: hsla(260, 80%, 60%, 0.6);
            --orbit-line-color: hsl(260 50% 66%);
            --orbit-line-thickness: calc(0.1rem + 0.09dvmin);
            --orbit-plane-color: radial-gradient(circle at center, hsla(250, 70%, 75%, 0.025), hsla(250, 70%, 75%, 0.1));
            --moon-orbit-size: 12dvmin;
            --mercury-orbit-size: 24dvmin;
            --venus-orbit-size: 36dvmin;
            --sun-orbit-size: 48dvmin;
            --mars-orbit-size: 60dvmin;
            --jupiter-orbit-size: 72dvmin;
            --saturn-orbit-size: 84dvmin;
            --stars-orbit-size: 96dvmin;
            --number-of-bodies: 10;
            --circle-delay: calc(var(--day) / 3.97);
            --circular-ease: cubic-bezier(0.37, 0, 0.63, 1);
        }

        :nth-child(1 of:is(.orbit)) {
            --i: 0;
        }

        :nth-child(2 of:is(.orbit)) {
            --i: 1;
        }

        :nth-child(3 of:is(.orbit)) {
            --i: 2;
        }

        :nth-child(4 of:is(.orbit)) {
            --i: 3;
        }

        :nth-child(5 of:is(.orbit)) {
            --i: 4;
        }

        :nth-child(6 of:is(.orbit)) {
            --i: 5;
        }

        :nth-child(7 of:is(.orbit)) {
            --i: 6;
        }

        :nth-child(8 of:is(.orbit)) {
            --i: 7;
        }

        :nth-child(1 of:is(.body, .body-container)) {
            --i: 0;
        }

        :nth-child(2 of:is(.body, .body-container)) {
            --i: 1;
        }

        :nth-child(3 of:is(.body, .body-container)) {
            --i: 2;
        }

        :nth-child(4 of:is(.body, .body-container)) {
            --i: 3;
        }

        :nth-child(5 of:is(.body, .body-container)) {
            --i: 4;
        }

        :nth-child(6 of:is(.body, .body-container)) {
            --i: 5;
        }

        :nth-child(7 of:is(.body, .body-container)) {
            --i: 6;
        }

        :nth-child(8 of:is(.body, .body-container)) {
            --i: 7;
        }

        :nth-child(9 of:is(.body, .body-container)) {
            --i: 8;
        }

        :nth-child(10 of:is(.body, .body-container)) {
            --i: 9;
        }

        :nth-child(1 of:is(.body-container.galaxy .arm)) {
            --i: 0;
        }

        :nth-child(2 of:is(.body-container.galaxy .arm)) {
            --i: 1;
        }

        body {
            height: 100dvh;
            margin: 0;
            background: var(--bg-color);
            overflow: hidden;
        }

        .universe {
            height: 100%;
            perspective: 50000px;
            translate: 0 -5%;
            position: relative;
        }

        .orbit {
            --enter-delay: calc(0.1s + var(--i) * (1s / 6));
            position: absolute;
            top: 50%;
            left: 50%;
            width: var(--size, 30dvmin);
            height: var(--size, 30dvmin);
            border-radius: 50%;
            background: var(--orbit-plane-color);
            box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
            transform-style: preserve-3d;
            rotate: x var(--pov);
            translate: -50% -40%;
            opacity: 0;
            -webkit-animation: orbit-appear 1.5s var(--enter-delay, 0.1s) forwards;
            animation: orbit-appear 1.5s var(--enter-delay, 0.1s) forwards;
        }

        @-webkit-keyframes orbit-appear {
            to {
                opacity: 1;
                translate: -50% -50%;
            }
        }

        @keyframes orbit-appear {
            to {
                opacity: 1;
                translate: -50% -50%;
            }
        }

        .orbit::after {
            --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
            content: '';
            position: absolute;
            top: -75%;
            left: calc(-1 * var(--orbit-line-thickness));
            width: calc(100% + var(--orbit-line-thickness) * 2);
            height: 250%;
            background: radial-gradient(circle var(--cutout) at center, #0000 99.9%, var(--orbit-sphere-color));
            border-radius: 50%;
            -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
        }

        .orbit.moon {
            --size: var(--moon-orbit-size);
        }

        .orbit.mercury {
            --size: var(--mercury-orbit-size);
        }

        .orbit.venus {
            --size: var(--venus-orbit-size);
        }

        .orbit.sun {
            --size: var(--sun-orbit-size);
        }

        .orbit.mars {
            --size: var(--mars-orbit-size);
        }

        .orbit.jupiter {
            --size: var(--jupiter-orbit-size);
        }

        .orbit.saturn {
            --size: var(--saturn-orbit-size);
        }

        .orbit.stars {
            --size: var(--stars-orbit-size);
            --orbit-sphere-color: hsla(260, 80%, 20%, 0.6);
            --orbit-line-color: hsl(260 50% 60%);
        }

        .orbit.stars .star {
            --size: 8dvmin;
            --astronomical-unit: calc(var(--stars-orbit-size) / 2 - (var(--y) * var(--y)) * 14dvmin);
            --star-x-delay: calc(var(--j) * -0.5s);
            content: '';
            position: absolute;
            z-index: 1;
            bottom: -8%;
            left: calc(50% + var(--astronomical-unit));
            width: calc(var(--size) * cos(var(--pov)));
            height: var(--size);
            background: #fff0ea99;
            mix-blend-mode: color-dodge;
            -webkit-clip-path: polygon(50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
            clip-path: polygon(50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
            translate: -50% calc(-50% + var(--y) * 800%);
            rotate: x calc(var(--y) * 80deg);
            scale: calc(1 - var(--y) / 1.5) calc(1 - var(--y) / 2);
            transform-style: preserve-3d;
            -webkit-animation: star-rise-and-shine var(--day) var(--star-x-delay) infinite, star-move-x var(--day) var(--star-x-delay) infinite var(--circular-ease), star-move-y var(--day) calc(0s - var(--circle-delay) + var(--star-x-delay)) infinite var(--circular-ease);
            animation: star-rise-and-shine var(--day) var(--star-x-delay) infinite, star-move-x var(--day) var(--star-x-delay) infinite var(--circular-ease), star-move-y var(--day) calc(0s - var(--circle-delay) + var(--star-x-delay)) infinite var(--circular-ease);
        }

        @-webkit-keyframes star-rise-and-shine {

            from,
            52%,
            to {
                opacity: 0;
            }

            60%,
            93% {
                opacity: 1;
            }

            63%,
            67%,
            71%,
            76%,
            81%,
            86%,
            91% {
                opacity: 1;
            }

            61%,
            65%,
            69%,
            73%,
            78%,
            83%,
            89% {
                opacity: max(0.3, sin(var(--j)));
            }
        }

        @keyframes star-rise-and-shine {

            from,
            52%,
            to {
                opacity: 0;
            }

            60%,
            93% {
                opacity: 1;
            }

            63%,
            67%,
            71%,
            76%,
            81%,
            86%,
            91% {
                opacity: 1;
            }

            61%,
            65%,
            69%,
            73%,
            78%,
            83%,
            89% {
                opacity: max(0.3, sin(var(--j)));
            }
        }

        @-webkit-keyframes star-move-x {

            from,
            to {
                transform: rotateY(-70deg);
            }

            50% {
                transform: rotateY(70deg);
                left: calc(50% - var(--astronomical-unit));
            }
        }

        @keyframes star-move-x {

            from,
            to {
                transform: rotateY(-70deg);
            }

            50% {
                transform: rotateY(70deg);
                left: calc(50% - var(--astronomical-unit));
            }
        }

        @-webkit-keyframes star-move-y {
            50% {
                bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
            }
        }

        @keyframes star-move-y {
            50% {
                bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
            }
        }

        .body,
        .body-container {
            --inner-orbit: 0;
            --orbit-progress: 0;
            --sunlight-delay: calc(var(--sun-orbit-progress) * var(--day) * -1);
            --orbit-delay: calc(var(--orbit-progress) * var(--day) * -1);
            --inverse-index: calc(var(--number-of-bodies) - var(--i));
            --shine-delay: calc((var(--sunlight-delay) + var(--orbit-delay)) - (var(--day) * var(--inner-orbit)));
            --anim-body-reveal: body-reveal 1.5s calc(1s + 0.09s * var(--i)) forwards;
            --anim-body-index: body-index var(--day) var(--orbit-delay) infinite;
            --anim-body-shine: body-shine var(--day) var(--shine-delay) linear infinite;
            --anim-body-move-x: body-move-x var(--day) var(--orbit-delay) infinite var(--circular-ease);
            --anim-body-move-y: body-move-y var(--day) calc(var(--orbit-delay) - var(--circle-delay)) infinite var(--circular-ease);
            position: absolute;
            left: calc(50% + var(--astronomical-unit));
            top: 0;
            opacity: 0;
            translate: -50% calc(-50% - (50% * sin(var(--pov))));
            width: var(--size);
            height: var(--size);
            background: radial-gradient(circle at center, var(--color-1, darkgray), var(--color-2, #333) 60%);
            background-size: 300%;
            background-position: center;
            border-radius: 50%;
            -webkit-animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), var(--anim-body-move-x), var(--anim-body-move-y);
            animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), var(--anim-body-move-x), var(--anim-body-move-y);
        }

        @-webkit-keyframes body-reveal {
            to {
                top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
                opacity: 1;
            }
        }

        @keyframes body-reveal {
            to {
                top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
                opacity: 1;
            }
        }

        @-webkit-keyframes body-index {

            from,
            49% {
                z-index: var(--inverse-index);
            }

            50%,
            to {
                z-index: 0;
            }
        }

        @keyframes body-index {

            from,
            49% {
                z-index: var(--inverse-index);
            }

            50%,
            to {
                z-index: 0;
            }
        }

        @-webkit-keyframes body-shine {
            to {
                background-position-x: -100%;
            }
        }

        @keyframes body-shine {
            to {
                background-position-x: -100%;
            }
        }

        @-webkit-keyframes body-move-x {
            50% {
                left: calc(50% - var(--astronomical-unit));
            }
        }

        @keyframes body-move-x {
            50% {
                left: calc(50% - var(--astronomical-unit));
            }
        }

        @-webkit-keyframes body-move-y {
            50% {
                top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
            }
        }

        @keyframes body-move-y {
            50% {
                top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
            }
        }

        .body-container.earth,
        .body-container.moon,
        .body-container.mercury,
        .venus {
            --inner-orbit: 1;
        }

        .body-container.earth {
            --size: 4dvmin;
            --color-1: #67aecb;
            --color-2: mediumblue;
            --astronomical-unit: 0%;
            --orbit-progress: calc(1 - var(--sun-orbit-progress));
            -webkit-animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), earth-night var(--day) var(--shine-delay) linear infinite;
            animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), earth-night var(--day) var(--shine-delay) linear infinite;
        }

        @-webkit-keyframes earth-night {
            50% {
                box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
            }
        }

        @keyframes earth-night {
            50% {
                box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
            }
        }

        .body-container.earth .human-lights {
            --color: #fc07;
            --dim-color: #fc04;
            --px: 0.6em;
            --light: 0 var(--px) var(--color);
            --dim-light: 0 var(--px) var(--dim-color);
            --this-mad-city: 0 var(--px) #db709388;
            font-size: calc(var(--size) / 50);
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            width: 1em;
            height: 1em;
            translate: -50% -50%;
            border-radius: 50%;
            opacity: 0;
            mix-blend-mode: difference;
            box-shadow: -5em -16em var(--light), -4em -15em var(--light), -3em -16em var(--light), -5em -14em var(--dim-light), -6em -13em var(--dim-light), -3em -14em var(--dim-light), -2em -13em var(--light), -1em -18em var(--light), -1em -16em var(--light), -2em -16em var(--dim-light), 1em -15em var(--light), 0em -15em var(--dim-light), 2em -15em var(--dim-light), 4em -14em var(--light), 8em -11em var(--dim-light), 6em -12em var(--this-mad-city), 8em -8em var(--light), 7em -5em var(--light), 4em -19em var(--dim-light), 8em -17em var(--light), 1em -13em var(--dim-light), 8em -6em var(--dim-light), 4em -4em var(--light), 17em -10em var(--light), 19em -7em var(--dim-light), -1em -4em var(--light), 2em -4em var(--dim-light), 6em -1em var(--dim-light), 5em -3em var(--dim-light), 6em 1em var(--light);
            -webkit-animation: earth-human-lights var(--day) var(--shine-delay) linear infinite;
            animation: earth-human-lights var(--day) var(--shine-delay) linear infinite;
        }

        @-webkit-keyframes earth-human-lights {
            50% {
                opacity: 1;
            }
        }

        @keyframes earth-human-lights {
            50% {
                opacity: 1;
            }
        }

        .body-container.earth::before,
        .body-container.earth::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .body-container.earth::before {
            translate: -45% -40%;
            width: calc(var(--size) / 2);
            height: calc(var(--size) / 1.8);
            border-radius: 50% 100%;
            -webkit-clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%, 25% 40%, 3% 35%, 0 30%, 3% 10%, 4% 0);
            clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%, 25% 40%, 3% 35%, 0 30%, 3% 10%, 4% 0);
            background: linear-gradient(to bottom, palegoldenrod 30%, darkgreen 60%, sienna);
            mix-blend-mode: soft-light;
            filter: blur(0.1dvmin);
        }

        .body-container.earth::after {
            width: 100%;
            height: 100%;
            translate: -50% -50%;
            border-radius: 50%;
            background: repeating-radial-gradient(circle at 50% 0%, #fff4 3%, #fff4 10%, #0000 11%, #0000 40%, #fff4 60%, #0000 80%, #0000 100%), repeating-radial-gradient(ellipse calc(var(--size) / 1.5) calc(var(--size) / 6) at 30% 90%, #fff4, #fffa 1%, transparent 3%, #fff9 5%, transparent 7%, #fff4 9%, transparent 11%, transparent 100%);
            background-size: 200% 100%;
            background-position: right center;
            filter: blur(0.1dvmin);
            mix-blend-mode: hard-light;
            -webkit-animation: earth-clouds calc(var(--day) * 3.1) linear infinite;
            animation: earth-clouds calc(var(--day) * 3.1) linear infinite;
        }

        @-webkit-keyframes earth-clouds {
            to {
                background-position-x: -100%;
            }
        }

        @keyframes earth-clouds {
            to {
                background-position-x: -100%;
            }
        }

        .body-container.moon {
            --size: 2dvmin;
            --color-1: #eee;
            --color-2: #333;
            --astronomical-unit: calc(var(--moon-orbit-size) / 2);
            --orbit-progress: 0.2;
            overflow: hidden;
        }

        .body-container.moon .crater {
            position: absolute;
            top: var(--y);
            left: var(--x);
            z-index: 1;
            translate: 0 -50%;
            width: calc(var(--size) * 100%);
            height: calc(var(--size) * 100%);
            background: #0003;
            transform-style: preserve-3d;
            transform-origin: left center;
            rotate: x calc(90deg - var(--pov));
            border-radius: 50%;
            box-shadow: 0.1dvmin 0.1dvmin 0.1dvmin #fff7, -0.1dvmin -0.1dvmin 0.1dvmin #0009;
            -webkit-animation: moon-crater var(--day) calc(var(--day) / -2.2) linear infinite;
            animation: moon-crater var(--day) calc(var(--day) / -2.2) linear infinite;
        }

        @-webkit-keyframes moon-crater {
            from {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * -100%)) rotateY(-90deg);
            }

            99.9% {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * 100%)) rotateY(90deg);
            }

            to {
                z-index: 0;
            }
        }

        @keyframes moon-crater {
            from {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * -100%)) rotateY(-90deg);
            }

            99.9% {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * 100%)) rotateY(90deg);
            }

            to {
                z-index: 0;
            }
        }

        .body-container.moon .crater-1 {
            --size: 0.3;
            --x: 30%;
            --y: 20%;
        }

        .body-container.moon .crater-2 {
            --size: 0.2;
            --x: 66%;
            --y: 55%;
        }

        .body-container.moon .crater-3 {
            --size: 0.15;
            --x: 55%;
            --y: 40%;
        }

        .body-container.moon .crater-4 {
            --size: 0.25;
            --x: 27%;
            --y: 50%;
        }

        .body-container.moon .crater-5 {
            --size: 0.1;
            --x: 60%;
            --y: 70%;
        }

        .body-container.moon .crater-6 {
            --size: 0.1;
            --x: 20%;
            --y: 40%;
        }

        .body-container.mercury {
            --size: 2dvmin;
            --color-1: #eed;
            --color-2: #443;
            --astronomical-unit: calc(var(--mercury-orbit-size) / 2);
            --orbit-progress: 0.35;
            overflow: hidden;
        }

        .body-container.mercury .crater {
            position: absolute;
            top: var(--y);
            left: var(--x);
            z-index: 1;
            rotate: x calc(90deg - var(--pov));
            translate: 0 -50%;
            transform-style: preserve-3d;
            transform-origin: left center;
            width: calc(var(--size) * 100%);
            height: calc(var(--size) * 100%);
            background: #fff7;
            border-radius: 50%;
            box-shadow: inset 0 0 0.2dvmin 0.02dvmin #0006;
            -webkit-animation: mercury-crater var(--day) calc(var(--day) / -2) linear infinite;
            animation: mercury-crater var(--day) calc(var(--day) / -2) linear infinite;
        }

        @-webkit-keyframes mercury-crater {
            from {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * -100%)) rotateY(-90deg);
            }

            99.9% {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * 100%)) rotateY(90deg);
            }

            to {
                z-index: 0;
            }
        }

        @keyframes mercury-crater {
            from {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * -100%)) rotateY(-90deg);
            }

            99.9% {
                z-index: 1;
                transform: translateX(calc(1 / var(--size) * 100%)) rotateY(90deg);
            }

            to {
                z-index: 0;
            }
        }

        .body-container.mercury .crater-1 {
            --size: 0.1;
            --x: 35%;
            --y: 21%;
        }

        .body-container.mercury .crater-2 {
            --size: 0.15;
            --x: 68%;
            --y: 35%;
        }

        .body-container.mercury .crater-3 {
            --size: 0.17;
            --x: 50%;
            --y: 42%;
        }

        .body-container.mercury .crater-4 {
            --size: 0.12;
            --x: 22%;
            --y: 75%;
        }

        .body-container.mercury .crater-5 {
            --size: 0.2;
            --x: 37%;
            --y: 53%;
        }

        .body-container.mercury .crater-6 {
            --size: 0.16;
            --x: 17%;
            --y: 79%;
        }

        .body-container.mercury .crater-7 {
            --size: 0.13;
            --x: 18%;
            --y: 23%;
        }

        .body-container.mercury .crater-8 {
            --size: 0.17;
            --x: 83%;
            --y: 38%;
        }

        .body-container.mercury .crater-9 {
            --size: 0.11;
            --x: 60%;
            --y: 18%;
        }

        .body-container.mercury .crater-10 {
            --size: 0.1;
            --x: 42%;
            --y: 70%;
        }

        .body-container.mercury .crater-11 {
            --size: 0.14;
            --x: 75%;
            --y: 65%;
        }

        .body-container.mercury .crater-12 {
            --size: 0.2;
            --x: 86%;
            --y: 60%;
        }

        .body-container.mercury .crater-13 {
            --size: 0.15;
            --x: 76%;
            --y: 73%;
        }

        .body-container.mercury .crater-14 {
            --size: 0.14;
            --x: 20%;
            --y: 50%;
        }

        .body-container.mercury .crater-15 {
            --size: 0.17;
            --x: 27%;
            --y: 22%;
        }

        .body-container.mercury .crater-16 {
            --size: 0.11;
            --x: 16%;
            --y: 73%;
        }

        .body.venus {
            --size: 4dvmin;
            --color-1: #eed;
            --color-2: #553;
            --astronomical-unit: calc(var(--venus-orbit-size) / 2);
            --orbit-progress: 0.3;
        }

        .body.sun {
            --size: 6dvmin;
            --color-1: #fb3;
            --color-2: yellow;
            --astronomical-unit: calc(var(--sun-orbit-size) / 2);
            --orbit-progress: var(--sun-orbit-progress);
            box-shadow: 0 0 1dvmin 0.2dvmin #ffd, 0 0 3dvmin 1dvmin #fa3;
            -webkit-animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-move-x), var(--anim-body-move-y);
            animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-move-x), var(--anim-body-move-y);
        }

        .body-container.mars {
            --size: 3dvmin;
            --color-1: darkorange;
            --color-2: #750;
            --astronomical-unit: calc(var(--mars-orbit-size) / 2);
            --orbit-progress: 0.6;
            overflow: hidden;
        }

        .body-container.mars .ice-cap {
            position: absolute;
            width: calc(var(--size) / 2.5);
            height: calc(var(--size) / 2.5);
            top: 0;
            left: 50%;
            translate: -50% -40%;
            rotate: x var(--pov);
            background: radial-gradient(circle at center, #fff8, transparent);
            mix-blend-mode: overlay;
            border-radius: 50%;
            -webkit-clip-path: polygon(0 0, 30% 0, 32% 40%, 34% 0, 60% 0, 82% 60%, 84% 5%, 90% 25%, 70% 27%, 88% 30%, 95% 70%, 60% 71%, 93% 76%, 100% 100%, 66% 66%, 33% 90%, 0 100%);
            clip-path: polygon(0 0, 30% 0, 32% 40%, 34% 0, 60% 0, 82% 60%, 84% 5%, 90% 25%, 70% 27%, 88% 30%, 95% 70%, 60% 71%, 93% 76%, 100% 100%, 66% 66%, 33% 90%, 0 100%);
            -webkit-animation: mars-ice-cap var(--day) linear infinite;
            animation: mars-ice-cap var(--day) linear infinite;
        }

        @-webkit-keyframes mars-ice-cap {
            to {
                transform: rotate(-1turn);
            }
        }

        @keyframes mars-ice-cap {
            to {
                transform: rotate(-1turn);
            }
        }

        .body-container.mars::before,
        .body-container.mars::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            filter: blur(1.33dvmin);
            background: #1a1300ff;
            mix-blend-mode: hard-light;
            -webkit-animation: mars-surface var(--day) linear infinite;
            animation: mars-surface var(--day) linear infinite;
        }

        @-webkit-keyframes mars-surface {
            from {
                transform: translateX(-200%);
            }

            to {
                transform: translateX(200%);
            }
        }

        @keyframes mars-surface {
            from {
                transform: translateX(-200%);
            }

            to {
                transform: translateX(200%);
            }
        }

        .body-container.mars::before {
            translate: -10% -20%;
            width: calc(var(--size) / 3.5);
            height: calc(var(--size) / 1.8);
            -webkit-clip-path: polygon(5% 19%, 32% 32%, 65% 39%, 83% 38%, 98% 48%, 90% 65%, 78% 64%, 66% 77%, 56% 69%, 47% 67%, 32% 72%, 19% 76%, 8% 68%, 4% 53%, 2% 39%);
            clip-path: polygon(5% 19%, 32% 32%, 65% 39%, 83% 38%, 98% 48%, 90% 65%, 78% 64%, 66% 77%, 56% 69%, 47% 67%, 32% 72%, 19% 76%, 8% 68%, 4% 53%, 2% 39%);
        }

        .body-container.mars::after {
            translate: -70% -40%;
            width: calc(var(--size) / 2.6);
            height: calc(var(--size) / 3.5);
            -webkit-clip-path: polygon(5% 19%, 32% 32%, 65% 39%, 83% 38%, 98% 48%, 90% 65%, 78% 64%, 66% 77%, 56% 69%, 47% 67%, 32% 72%, 19% 76%, 8% 68%, 4% 53%, 2% 39%);
            clip-path: polygon(5% 19%, 32% 32%, 65% 39%, 83% 38%, 98% 48%, 90% 65%, 78% 64%, 66% 77%, 56% 69%, 47% 67%, 32% 72%, 19% 76%, 8% 68%, 4% 53%, 2% 39%);
        }

        .body.jupiter {
            --size: 5dvmin;
            --color-1: #9f938f;
            --color-2: #321;
            --astronomical-unit: calc(var(--jupiter-orbit-size) / 2);
            --orbit-progress: 0.4;
            overflow: hidden;
        }

        .body.jupiter::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(ellipse 140% 100% at center -5%, transparent 38%, #6526 41%, #6526 44%, transparent 45%, transparent 46%, #652a 46%, #652a 52%, transparent 53%, transparent 58%, #652a 60%, #652a 66%, transparent 67%);
            background-size: 200% 200%;
            background-position: center center;
            mix-blend-mode: soft-light;
        }

        .body.jupiter::before {
            --great-red-spot-width: calc(var(--size) / 10);
            --great-red-spot-height: calc(var(--size) / 12);
            content: '';
            position: absolute;
            z-index: 1;
            inset: 0;
            border-radius: 50%;
            box-shadow: inset 0 0 calc(var(--size) / 2) var(--color-1);
            background: radial-gradient(ellipse var(--great-red-spot-width) var(--great-red-spot-height) at 70% 68%, #5329, transparent), radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.5) calc(var(--great-red-spot-height) / 2.5) at 80% 60%, #fec6, transparent), radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.3) calc(var(--great-red-spot-height) / 2.3) at 45% 63%, #fec6, transparent), radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.1) calc(var(--great-red-spot-height) / 2.1) at 30% 36%, #fec6, transparent);
            background-size: 200% 100%;
            background-position: center center;
            mix-blend-mode: overlay;
            -webkit-animation: jupiter-clouds var(--day) calc(var(--day) / -1.2) linear infinite;
            animation: jupiter-clouds var(--day) calc(var(--day) / -1.2) linear infinite;
        }

        @-webkit-keyframes jupiter-clouds {
            from {
                background-position-x: left;
            }

            to {
                background-position-x: -200%;
            }
        }

        @keyframes jupiter-clouds {
            from {
                background-position-x: left;
            }

            to {
                background-position-x: -200%;
            }
        }

        .body-container.saturn {
            --size: 5dvmin;
            --color-1: #cb9;
            --color-2: #531;
            --astronomical-unit: calc(var(--saturn-orbit-size) / 2);
            --orbit-progress: 0.1;
            --ring-a-size: 180%;
            --ring-a-color: var(--color-1);
            --ring-b-size: 200%;
            --ring-b-color: var(--color-1);
        }

        .body-container.saturn .body-copy,
        .body-container.saturn .storms {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: inherit;
        }

        .body-container.saturn .storms {
            overflow: hidden;
        }

        .body-container.saturn .storm {
            position: absolute;
            width: var(--size);
            height: var(--size);
            top: 0;
            left: 50%;
            translate: -50% var(--y);
            rotate: x var(--pov);
            border-radius: inherit;
            mix-blend-mode: overlay;
            -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            background: var(--bg);
            filter: blur(var(--fuzz));
        }

        .body-container.saturn .storm:nth-child(1) {
            --y: -60%;
            --fuzz: 0.1dvmin;
            --bg: radial-gradient(circle at center, transparent 20%, #1323 40%, transparent);
        }

        .body-container.saturn .storm:nth-child(2) {
            --y: -35%;
            --fuzz: 0.1dvmin;
            --bg: radial-gradient(circle at center, transparent 55%, #3213);
        }

        .body-container.saturn .storm:nth-child(3) {
            --y: -15%;
            --fuzz: 0.25dvmin;
            --bg: radial-gradient(circle at center, transparent 25%, #fed2);
        }

        .body-container.saturn::before,
        .body-container.saturn::after,
        .body-container.saturn .ring-far {
            position: absolute;
            top: 50%;
            left: 50%;
            rotate: x var(--pov);
            border-radius: 50%;
        }

        .body-container.saturn::before,
        .body-container.saturn::after {
            content: '';
            z-index: 1;
            translate: -50% -50%;
            -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
            clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
        }

        .body-container.saturn .ring-far {
            translate: -50% -49%;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        }

        .body-container.saturn::before,
        .body-container.saturn .ring-far.a {
            width: var(--ring-a-size);
            height: var(--ring-a-size);
            background: radial-gradient(circle calc(var(--size) / 1.5) at center, #0000 99.9%, var(--ring-a-color));
        }

        .body-container.saturn::after,
        .body-container.saturn .ring-far.b {
            width: var(--ring-b-size);
            height: var(--ring-b-size);
            background: radial-gradient(circle calc(var(--size) / 1.05) at center, #0000 99.9%, var(--ring-b-color));
        }

        .body-container.saturn .shadow {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            background: radial-gradient(ellipse calc(var(--size) / 1.4) calc(var(--size) / 1.4 * 3) at center, #0000 18%, #000 18.1%);
            width: 100%;
            height: 75%;
            transform-style: preserve-3d;
            transform-origin: left center;
            rotate: x var(--pov);
            translate: 0 -50%;
            border-radius: 30%;
            border-top-right-radius: 50% 90%;
            border-bottom-right-radius: 50% 90%;
            -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
            clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
            -webkit-animation: saturn-shadow var(--day) -2s linear infinite;
            animation: saturn-shadow var(--day) -2s linear infinite;
        }

        @-webkit-keyframes saturn-shadow {

            from,
            40%,
            to {
                opacity: 0.8;
            }

            50%,
            90% {
                opacity: 0.7;
            }

            to {
                transform: rotateZ(-1turn);
            }

            7.8%,
            43.5% {
                z-index: 0;
            }

            43.6% {
                z-index: 2;
            }
        }

        @keyframes saturn-shadow {

            from,
            40%,
            to {
                opacity: 0.8;
            }

            50%,
            90% {
                opacity: 0.7;
            }

            to {
                transform: rotateZ(-1turn);
            }

            7.8%,
            43.5% {
                z-index: 0;
            }

            43.6% {
                z-index: 2;
            }
        }

        .body-container.nebula {
            --size: 0.25dvmin;
            --color-1: white;
            --color-2: white;
            --astronomical-unit: calc(var(--stars-orbit-size) / 2);
            --orbit-progress: 0.85;
            --part-width: calc(var(--size) * 30);
            --part-height: calc(var(--size) * 20);
            --center-size: calc(var(--size) * 40);
            --part-bg-1: #4ad8;
            --part-bg-2: #b50a;
            --part-bg-3: #ec2a;
        }

        .body-container.nebula .body-copy {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: inherit;
            width: 100%;
            height: 100%;
            width: var(--center-size);
            height: var(--center-size);
            translate: -50% -50%;
            background: inherit;
            background: radial-gradient(ellipse calc(var(--center-size) / 1.25) calc(var(--center-size) / 2) at center, transparent 20%, #fff3, transparent 60%);
        }

        .body-container.nebula .body-copy::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(var(--size));
            height: calc(var(--size));
            -webkit-animation: nebula-stars-twinkle 3s linear infinite;
            animation: nebula-stars-twinkle 3s linear infinite;
        }

        @-webkit-keyframes nebula-stars-twinkle {

            from,
            27%,
            40%,
            60%,
            73%,
            to {
                box-shadow: -2dvmin -1.1dvmin 0 #fff2, -3.4dvmin -1dvmin 0 #fff4, -1.5dvmin -0.5dvmin 0 #fff3, -1dvmin 1.3dvmin 0 #fff4, -4.2dvmin 1dvmin 0 #fff1, -1.5dvmin 0.5dvmin 0 #fff1, 0.6dvmin -0.6dvmin 0 #fff2, 1.9dvmin -1.4dvmin 0 #fff3, 2.5dvmin -1dvmin 0 #fff4, 1.5dvmin 0.5dvmin 0 #fff5, 1.8dvmin 1.25dvmin 0 #fff2, 3dvmin 0.9dvmin 0 #fff3;
            }

            33%,
            66% {
                box-shadow: -2dvmin -1.1dvmin 0 #fff4, -3.4dvmin -1dvmin 0 #fff5, -1.5dvmin -0.5dvmin 0 #fff4, -1dvmin 1.3dvmin 0 #fff2, -4.2dvmin 1dvmin 0 #fff2, -1.5dvmin 0.5dvmin 0 #fff4, 0.6dvmin -0.6dvmin 0 #fff6, 1.9dvmin -1.4dvmin 0 #fff4, 2.5dvmin -1dvmin 0 #fff5, 1.5dvmin 0.5dvmin 0 #fff3, 1.8dvmin 1.25dvmin 0 #fff4, 3dvmin 0.9dvmin 0 #fff7;
            }
        }

        @keyframes nebula-stars-twinkle {

            from,
            27%,
            40%,
            60%,
            73%,
            to {
                box-shadow: -2dvmin -1.1dvmin 0 #fff2, -3.4dvmin -1dvmin 0 #fff4, -1.5dvmin -0.5dvmin 0 #fff3, -1dvmin 1.3dvmin 0 #fff4, -4.2dvmin 1dvmin 0 #fff1, -1.5dvmin 0.5dvmin 0 #fff1, 0.6dvmin -0.6dvmin 0 #fff2, 1.9dvmin -1.4dvmin 0 #fff3, 2.5dvmin -1dvmin 0 #fff4, 1.5dvmin 0.5dvmin 0 #fff5, 1.8dvmin 1.25dvmin 0 #fff2, 3dvmin 0.9dvmin 0 #fff3;
            }

            33%,
            66% {
                box-shadow: -2dvmin -1.1dvmin 0 #fff4, -3.4dvmin -1dvmin 0 #fff5, -1.5dvmin -0.5dvmin 0 #fff4, -1dvmin 1.3dvmin 0 #fff2, -4.2dvmin 1dvmin 0 #fff2, -1.5dvmin 0.5dvmin 0 #fff4, 0.6dvmin -0.6dvmin 0 #fff6, 1.9dvmin -1.4dvmin 0 #fff4, 2.5dvmin -1dvmin 0 #fff5, 1.5dvmin 0.5dvmin 0 #fff3, 1.8dvmin 1.25dvmin 0 #fff4, 3dvmin 0.9dvmin 0 #fff7;
            }
        }

        .body-container.nebula .part {
            position: absolute;
            top: 50%;
            left: 50%;
            translate: calc(-50% + var(--part-distance)) -50%;
            width: var(--part-width);
            height: var(--part-height);
            border-radius: 100%;
            filter: blur(0.2dvmin);
            background: linear-gradient(var(--part-side), var(--part-bg-1) 15%, var(--part-bg-2), transparent), linear-gradient(to bottom, var(--part-bg-3), transparent 20%, transparent 80%, var(--part-bg-3)), radial-gradient(circle at center, transparent 50%, var(--part-bg-3));
        }

        .body-container.nebula .part.a {
            --part-side: to left;
            --part-distance: -20%;
        }

        .body-container.nebula .part.b {
            --part-side: to right;
            --part-distance: 20%;
        }

        .body-container.galaxy {
            --size: 0.5dvmin;
            --color-1: white;
            --color-2: white;
            --astronomical-unit: calc(var(--stars-orbit-size) / 2);
            --orbit-progress: 0.35;
            --evolution-speed: calc(var(--day) / 3);
            --arm-thickness: 0.6dvmin;
        }

        .body-container.galaxy .body-copy {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: inherit;
            box-shadow: inset 0 0 var(--size) #5206;
        }

        .body-container.galaxy .arms {
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            -webkit-animation: galaxy-rotation 5s linear infinite;
            animation: galaxy-rotation 5s linear infinite;
        }

        @-webkit-keyframes galaxy-rotation {
            to {
                transform: rotate(1turn);
            }
        }

        @keyframes galaxy-rotation {
            to {
                transform: rotate(1turn);
            }
        }

        .body-container.galaxy .arm {
            position: absolute;
            top: 50%;
            left: 50%;
            translate: calc(-42% + var(--i) * -15%) calc(-42% + var(--i) * -15%);
            rotate: calc(var(--i) * 180deg);
        }

        .body-container.galaxy .arm-depth {
            width: calc(var(--size) * 15);
            height: calc(var(--size) * 15);
            position: relative;
            transform: rotate(0.4turn);
            -webkit-animation: galaxy-evolution var(--evolution-speed) ease-in-out infinite;
            animation: galaxy-evolution var(--evolution-speed) ease-in-out infinite;
        }

        @-webkit-keyframes galaxy-evolution {
            50% {
                transform: rotate(0.6turn);
            }
        }

        @keyframes galaxy-evolution {
            50% {
                transform: rotate(0.6turn);
            }
        }

        .body-container.galaxy .arm-depth::before {
            --arm-color: hsl(calc(245 + var(--d) * 20), 30%, calc(60% + var(--d) * 5%));
            content: '';
            position: absolute;
            inset: 0;
            border-top: var(--arm-thickness) solid var(--arm-color);
            border-right: var(--arm-thickness) solid var(--arm-color);
            border-radius: 100%;
            filter: blur(0.2dvmin);
        }

        .body-container.galaxy .arm-depth::after {
            content: '';
            position: absolute;
            width: calc(var(--size) / 4);
            height: calc(var(--size) / 4);
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            border-radius: 50%;
            box-shadow: 0.8dvmin 0 2.25dvmin 0 brown, -0.8dvmin 0 2.25dvmin 0 brown, 0 1.6dvmin 1.25dvmin 0 orange, 0 -1.6dvmin 1.25dvmin 0 orange, 2.4dvmin 0 0.15dvmin 0 white, -2.4dvmin 0 0.15dvmin 0 #fe9, 0 3.2dvmin 0.15dvmin 0 white, -1.3dvmin 3dvmin 0.3dvmin 0.1dvmin hsla(calc(302 - var(--i) * 70), 50%, calc(64.7% + var(--i) * 10%), calc(0.6 / var(--d) - var(--i) / 4)), -2.3dvmin 2.7dvmin 0.3dvmin hsl(250, 30%, 70%), -2.8dvmin 2.2dvmin 0.3dvmin #fa78, 0 -3.2dvmin 0.15dvmin 0 #edf5;
            -webkit-animation: galaxy-stars-dim var(--evolution-speed) ease-in-out infinite;
            animation: galaxy-stars-dim var(--evolution-speed) ease-in-out infinite;
        }

        @-webkit-keyframes galaxy-stars-dim {

            15%,
            35%,
            65%,
            85% {
                opacity: 0.6;
            }

            25%,
            75% {
                opacity: 0;
            }
        }

        @keyframes galaxy-stars-dim {

            15%,
            35%,
            65%,
            85% {
                opacity: 0.6;
            }

            25%,
            75% {
                opacity: 0;
            }
        }

        .body-container.galaxy .arm-depth .arm-depth {
            position: absolute;
            width: 61.8%;
            height: 61.8%;
            bottom: 6%;
            right: 5%;
        }
    </style>
</head>

<body>
    <div class="universe">
        <div class="orbit moon"></div>
        <div class="orbit mercury"></div>
        <div class="orbit venus"></div>
        <div class="orbit sun"></div>
        <div class="orbit mars"></div>
        <div class="orbit jupiter"></div>
        <div class="orbit saturn"></div>
        <div class="orbit stars">
            <div class="star" style="--j: 0; --y: 0.1"></div>
            <div class="star" style="--j: 1; --y: 0.5"></div>
            <div class="star" style="--j: 2; --y: 0.2"></div>
            <div class="star" style="--j: 3; --y: 0.1"></div>
            <div class="star" style="--j: 4; --y: 0.6"></div>
            <div class="star" style="--j: 5; --y: 0.2"></div>
            <div class="star" style="--j: 6; --y: 0.9"></div>
            <div class="star" style="--j: 7; --y: 0.4"></div>
            <div class="star" style="--j: 8; --y: 0.3"></div>
            <div class="star" style="--j: 9; --y: 0.5"></div>
            <div class="star" style="--j: 10; --y: 0.3"></div>
            <div class="star" style="--j: 11; --y: 0.4"></div>
            <div class="star" style="--j: 12; --y: 0.7"></div>
            <div class="star" style="--j: 13; --y: 0.8"></div>
            <div class="star" style="--j: 14; --y: 0.1"></div>
            <div class="star" style="--j: 15; --y: 0.2"></div>
            <div class="star" style="--j: 16; --y: 0.9"></div>
            <div class="star" style="--j: 17; --y: 0.4"></div>
            <div class="star" style="--j: 18; --y: 0.3"></div>
            <div class="star" style="--j: 19; --y: 0.5"></div>
            <div class="star" style="--j: 20; --y: 0.9"></div>
            <div class="star" style="--j: 21; --y: 0.2"></div>
            <div class="star" style="--j: 22; --y: 0.6"></div>
            <div class="star" style="--j: 23; --y: 0.2"></div>
            <div class="star" style="--j: 24; --y: 0.8"></div>
            <div class="star" style="--j: 25; --y: 0.7"></div>
            <div class="star" style="--j: 26; --y: 0.1"></div>
            <div class="star" style="--j: 27; --y: 0.3"></div>
            <div class="star" style="--j: 28; --y: 0.4"></div>
            <div class="star" style="--j: 29; --y: 0.7"></div>
            <div class="star" style="--j: 30; --y: 0.8"></div>
            <div class="star" style="--j: 31; --y: 0.3"></div>
            <div class="star" style="--j: 32; --y: 0.4"></div>
            <div class="star" style="--j: 33; --y: 0.7"></div>
            <div class="star" style="--j: 34; --y: 0.8"></div>
            <div class="star" style="--j: 35; --y: 0.1"></div>
            <div class="star" style="--j: 36; --y: 0.2"></div>
            <div class="star" style="--j: 37; --y: 0.9"></div>
            <div class="star" style="--j: 38; --y: 0.4"></div>
            <div class="star" style="--j: 39; --y: 0.3"></div>
            <div class="star" style="--j: 40; --y: 0.2"></div>
            <div class="star" style="--j: 41; --y: 0.8"></div>
            <div class="star" style="--j: 42; --y: 0.7"></div>
            <div class="star" style="--j: 43; --y: 0.1"></div>
        </div>
        <div class="body-container earth">
            <div class="human-lights"></div>
        </div>
        <div class="body-container moon">
            <div class="crater crater-1"></div>
            <div class="crater crater-2"></div>
            <div class="crater crater-3"></div>
            <div class="crater crater-4"></div>
            <div class="crater crater-5"></div>
            <div class="crater crater-6"></div>
        </div>
        <div class="body-container mercury">
            <div class="crater crater-1"></div>
            <div class="crater crater-2"></div>
            <div class="crater crater-3"></div>
            <div class="crater crater-4"></div>
            <div class="crater crater-5"></div>
            <div class="crater crater-6"></div>
            <div class="crater crater-7"></div>
            <div class="crater crater-8"></div>
            <div class="crater crater-9"></div>
            <div class="crater crater-10"></div>
            <div class="crater crater-11"></div>
            <div class="crater crater-12"></div>
            <div class="crater crater-13"></div>
            <div class="crater crater-14"></div>
            <div class="crater crater-15"></div>
            <div class="crater crater-16"></div>
        </div>
        <div class="body venus"></div>
        <div class="body sun"></div>
        <div class="body-container mars">
            <div class="ice-cap"></div>
        </div>
        <div class="body jupiter"></div>
        <div class="body-container saturn">
            <div class="ring-far a"></div>
            <div class="ring-far b"></div>
            <div class="shadow"></div>
            <div class="body-copy"></div>
            <div class="storms">
                <div class="storm"></div>
                <div class="storm"></div>
                <div class="storm"></div>
            </div>
        </div>
        <div class="body-container nebula">
            <div class="part a"></div>
            <div class="part b"></div>
            <div class="body-copy"></div>
        </div>
        <div class="body-container galaxy">
            <div class="arms">
                <div class="arm">
                    <div class="arm-depth" style="--d: 0">
                        <div class="arm-depth" style="--d: 1">
                            <div class="arm-depth" style="--d: 2">
                                <div class="arm-depth" style="--d: 3">
                                    <div class="arm-depth" style="--d: 4">
                                        <div class="arm-depth" style="--d: 5">
                                            <div class="arm-depth" style="--d: 6"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="arm">
                    <div class="arm-depth" style="--d: 0">
                        <div class="arm-depth" style="--d: 1">
                            <div class="arm-depth" style="--d: 2">
                                <div class="arm-depth" style="--d: 3">
                                    <div class="arm-depth" style="--d: 4">
                                        <div class="arm-depth" style="--d: 5">
                                            <div class="arm-depth" style="--d: 6"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body-copy"></div>
        </div>
    </div>
</body>

</html>